<template>
  <div class="mx-container">
    <zz-sub-nav :list="list" :index.sync="index">
      <div class="sub-nav-content">
        <div>
          <div class="details-title">{{$t('zz.architectural_characteristics')}}</div>
          <zz-card position="left">
            <img src="@/assets/img/chain/chain1-1.png" alt="" slot="img" width="450">
            <ul class="list-has-poi" slot="content"> 
              <li>{{$t('zz.scheme.chain.trait.1')}}</li>
              <li>{{$t('zz.scheme.chain.trait.2')}}</li>
              <li>{{$t('zz.scheme.chain.trait.3')}}</li>
              <li>{{$t('zz.scheme.chain.trait.4')}}</li>
            </ul>
          </zz-card>
        </div>
        <div>
          <div class="details-title">{{$t('zz.scheme_advantage')}}</div>
          <div>
            <div class="flex">
              <div class="advantage-card">
                <div>
                  <img src="@/assets/img/chain/chain2-1.png" alt="">
                </div>
                <h5>{{$t('zz.scheme.chain.advantage.1')}}</h5>
                <p>{{$t('zz.scheme.chain.advantage.1.des')}}</p>
              </div>
              <div class="advantage-card">
                <div>
                  <img src="@/assets/img/chain/chain2-2.png" alt="">
                </div>
                <h5>{{$t('zz.scheme.chain.advantage.2')}}</h5>
                <p>{{$t('zz.scheme.chain.advantage.2.des')}}</p>
              </div>
              <div class="advantage-card">
                <div>
                  <img src="@/assets/img/chain/chain2-3.png" alt="">
                </div>
                <h5>{{$t('zz.scheme.chain.advantage.3')}}</h5>
                <p>{{$t('zz.scheme.chain.advantage.3.des')}}</p>
              </div>
              <div class="advantage-card">
                <div>
                  <img src="@/assets/img/chain/chain2-4.png" alt="">
                </div>
                <h5>{{$t('zz.scheme.chain.advantage.4')}}</h5>
                <p>{{$t('zz.scheme.chain.advantage.4.des')}}</p>
              </div>
              <div class="advantage-card">
                <div>
                  <img src="@/assets/img/chain/chain2-5.png" alt="">
                </div>
                <h5>{{$t('zz.scheme.chain.advantage.5')}}</h5>
                <p>{{$t('zz.scheme.chain.advantage.5.des')}}</p>
              </div>
              <div class="advantage-card">
                <div>
                  <img src="@/assets/img/chain/chain2-6.png" alt="">
                </div>
                <h5>{{$t('zz.scheme.chain.advantage.6')}}</h5>
                <p>{{$t('zz.scheme.chain.advantage.6.des')}}</p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="details-title">{{$t('zz.application_scenarios')}}</div>
          <div class="flex-2">
            <div class="flex-2-item ">
              <div class="marginDivision">
              <zz-card position="bottom" titleSize="small" :height="isPC?150:''">
                <p slot="content">{{$t('zz.scheme.chain.app.1.des')}}</p>
                <div slot="title">{{$t('zz.scheme.chain.app.1')}}</div>
                <img src="@/assets/img/chain/chain3-1.png" slot="img" alt="">
              </zz-card>
              </div>
            </div>
            <div class="flex-2-item">
              <div class="marginDivision">
              <zz-card position="bottom" titleSize="small" :height="isPC?150:''">
                <p slot="content">{{$t('zz.scheme.chain.app.2.des')}}</p>
                <div slot="title">{{$t('zz.scheme.chain.app.2')}}</div>
                <img src="@/assets/img/chain/chain3-2.png" slot="img" alt="">
              </zz-card>
            </div>
            </div>
            <div class="flex-2-item ">
              <div class="marginDivision">
              <zz-card position="bottom" titleSize="small" :height="isPC?150:''">
                <p slot="content">{{$t('zz.scheme.chain.app.3.des')}}</p>
                <div slot="title">{{$t('zz.scheme.chain.app.3')}}</div>
                <img src="@/assets/img/chain/chain3-3.png" slot="img" alt="">
              </zz-card>
            </div>
            </div>
            <div class="flex-2-item ">
              <div class="marginDivision">
              <zz-card position="bottom" titleSize="small" :height="isPC?150:''">
                <p slot="content">{{$t('zz.scheme.chain.app.4.des')}}</p>
                <div slot="title">{{$t('zz.scheme.chain.app.4')}}</div>
                <img src="@/assets/img/chain/chain3-4.png" slot="img" alt="">
              </zz-card>
            </div>
            </div>
            <div class="flex-2-item ">
              <div class="marginDivision">
              <zz-card position="bottom" titleSize="small" :height="isPC?150:''">
                <p slot="content">{{$t('zz.scheme.chain.app.5.des')}}</p>
                <div slot="title">{{$t('zz.scheme.chain.app.5')}}</div>
                <img src="@/assets/img/chain/chain3-5.png" slot="img" alt="">
              </zz-card>
            </div>
            </div>
            <div class="flex-2-item">
              <div class="marginDivision">
              <zz-card position="bottom" titleSize="small" :height="isPC?150:''">
                <p slot="content">{{$t('zz.scheme.chain.app.6.des')}}</p>
                <div slot="title">{{$t('zz.scheme.chain.app.6')}}</div>
                <img src="@/assets/img/chain/chain3-6.png" slot="img" alt="">
              </zz-card>
            </div>
            </div>
          </div>
        </div>
      </div>
    </zz-sub-nav>
  </div>
</template>

<script>
import SubNav from "@/components/SubNav/index.vue";
import ZzCard from "@/components/ZzCard";
import SimCard from "@/components/SimCard";
import { mapGetters } from 'vuex'


export default {
  data() {
    return {
      index: 1,
      subIndex: 1,
      
    };
  },

  components: {
    "zz-sub-nav": SubNav,
    ZzCard,
    SimCard,
  },
  props: {},
  mounted() {},
  computed: {
    activeItem: function () {
      let activeItem = this.list.find((v) => v.index == this.index);
      console.log(this.list[this.index]);
      this.subIndex = activeItem.child ? activeItem.child[0].index : 1;
      return activeItem;
    },
    ...mapGetters({
      isPC: 'isPC'
    }),
    list: function(){ return [
        { name: this.$t('zz.architectural_characteristics'), index: 1 },
        { name: this.$t('zz.scheme_advantage'), index: 2 },
        { name: this.$t('zz.application_scenarios'), index: 3 },
      ]
      },
  },
  watch: {},
  methods: {
    navClick(a_item) {
      console.log(a_item);
      this.subIndex = a_item.index;
    },
  },
  destroyed() {},
};
</script>
<style lang='scss' scoped>
@import "@/style/variables.scss";

.sub-nav-content {
  padding: 12px 48px;
  flex: 1;
  width: 100%;
  .pro-title {
    color: $color;
    font-size: 20px;
    padding: 20px 45px;
    border-bottom: 1px solid $border;
  }
  .pro-intro-wrap {
    padding: 30px 48px;
  }
  img {
    max-width: 100%;
  }
}

.digital-title{
	font-size: 20px;
	line-height: 150%;
  margin-bottom: 30px;
}
.item-body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
	height: 417px;
	color: rgba(80, 80, 80, 1);
	box-shadow: #64a8f3 0px 0px 1px 2px;
	font-size: 14px;
	line-height: 150%;
	text-align: center;
  padding: 20px 15px;
}

.flex-left{
	width: 18px;
	font-size: 18px;
	line-height: 150%;
	font-weight: bold;
  margin: 0 25px 0 0;
}
.flex-right{
  .show-btn{
    display: flex;
    flex-wrap: wrap;
    li{
      width: 144px;
      height: 46px;
      color: #fff;
      background-color: #64a8f3;
      border-radius: 10px;
      font-size: 14px;
      line-height: 46px;
      text-align: center;
      margin: 10px 10px 0 0;
    }
  }
}
.flex{
  flex-wrap: wrap;
  .advantage-card{
    width: 33.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 25px 50px;
    border-right:1px solid #ccc;
    &:nth-child(3n){
      border-right:none;
    }
    &:nth-child(-n+3){
      border-bottom:1px solid #ccc;
    }
    h5{
      margin: 25px 0;
    }
  }
}

@media screen and (max-width:768px) {
  .marginDivision{
        margin: .35rem 0  !important;
  }
  .flex{
  .advantage-card{
    padding: .4rem .35rem;
    width: 50% !important;
    &:nth-child(3n){
      border-right:1px solid #ccc;
    }
    &:nth-child(2n){
      border-right:none;
    }
    
    &:nth-child(-n+4){
      border-bottom:1px solid #ccc;
    }
  }
  }
}

</style>